<template>
  <div class="orderSubmit">
    <div class="title_h3">提交稿件</div>
    <el-steps :active="active" finish-status="success" simple>
      <el-step title="选择主体服务"></el-step>
      <el-step title="选择次要服务"></el-step>
      <el-step title="提交需求"></el-step>
      <!-- <el-step title="上传成功"></el-step> -->
    </el-steps>
      <template v-if='active==0'>
          <!-- <div class="checkserve">选择服务</div> -->
          <div class="serve_ul">
            <div @click="setcheck(it)" :class="it.checked?'tag_item icon4 selected':'tag_item icon4'" v-for='(it,inx) in serveList' :key="inx">
              <div class="tag_item_icon">
                <img :src="it.img"  alt="">
              </div>
              <p class="tag_item_name">
                {{it.serviceName}}
              </p>
              <p class="tag_item_desc">
                {{it.serviceDesc}}
              </p>
            </div>
          </div>
      </template>
      <template v-if='active==1'>
          <!-- <div class="checkserve">选择服务</div> -->
          <div class="serve_ul">
            <div class="serve_li" v-for='(it,inx) in erservelist' :key="inx">
                <p class="list_item_name text_size_16 text_weight_bold text_color_black">{{it.serviceName}}</p>
                <div class="list_item_body">
                  <p v-if='!it.checked' class="list_item_body-description">{{it.serviceDesc}}</p>
                  <template v-else>
                    <template v-if='it.serviceInfo.finishTime.flag'>
                      <!-- <div class="selectBox" v-for='(ite,indx) in it.serviceInfo' :key='indx'>
                        <el-select style="width:100%;" v-model="ite.checkValue" :placeholder="ite.placeholder">
                          <el-option v-for="item in ite" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </div> -->
                      <p  class="list_item_body-description">请选择完成时间：</p>
                        <el-select style="width:100%;" @change="setfinishTime(it.serviceInfo.finishTime.checkValue,it.serviceInfo.finishTime.list)" v-model="it.serviceInfo.finishTime.checkValue" :placeholder="it.serviceInfo.finishTime.placeholder">
                          <el-option v-for="item in it.serviceInfo.finishTime.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </template>
                    <template v-if='it.serviceInfo.repeatNum.flag'>
                      <p  class="list_item_body-description">请选择查重率：</p>
                      <el-select style="width:100%;" @change="setrepeatNum(it.serviceInfo.repeatNum.checkValue,it.serviceInfo.repeatNum.list)" v-model="it.serviceInfo.repeatNum.checkValue" :placeholder="it.serviceInfo.repeatNum.placeholder">
                          <el-option v-for="item in it.serviceInfo.repeatNum.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </template>
                  </template>
                </div>
                <div class="list_item_footer">
                  <el-button @click="setchecked(it)" v-if='!it.checked' type="primary" size="small">选择服务</el-button>
                  <el-button @click="setchecked(it)" v-else size="small">已选择 <i class="el-icon-check"></i></el-button>
                  <!-- <a class="el-link el-link--info is-underline"><span class="el-link--inner">了解详情</span></a> -->
                </div>
            </div>
          </div>
      </template>
      <template v-if='active==2'>
        <div class="serve_ul">
          <div class="checkserve">稿件信息</div>
          <el-form ref="form" :model="reluform" label-width="80px">
            <el-form-item label="文章标题" class="is-required">
              <el-input v-model="reluform.orderTitle" maxlength="200"></el-input>
            </el-form-item>
            <el-form-item label="所属学科" class="is-required">
              <el-col :span='24'>
                <el-select style="width:100%;" @change="settowarr" v-model="reluform.oneid">
                  <el-option v-for="item in oneArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <!-- <el-col :offset="1" :span='11'>
                <el-select style="width:100%;" v-model="reluform.towid">
                  <el-option v-for="item in towArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col> -->
            </el-form-item>
            <el-form-item label="摘要" class="is-required">
              <el-input v-model="reluform.remark" maxlength="200"></el-input>
            </el-form-item>
            <el-form-item label="留言" class="is-required">
              <el-input v-model="reluform.leaveMessage" maxlength="200"></el-input>
            </el-form-item>
            <el-form-item label="稿件字数" class="is-required">
              <el-input v-model="reluform.codeNum" maxlength="10" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="上传稿件" class="is-required">
              <el-upload
                :headers="headers"
                :action="uploadUrl"
                :before-upload="handleBeforeUpload"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                name="file"
                :file-list="fileList"
                :before-remove='removeItem'
                ref="upload" >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">文件最大10M,限10个文件</div>
            </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template v-if='active==3'>
        <div class="overservebox">
          <p class="overservebox_title">提交成功！</p>
          <el-button @click='spkt' type="primary">前往我的稿件</el-button>
          <el-button @click='active =0' type="primary">继续提交</el-button>
        </div>
      </template>
    <div class="footer_box" v-if='active!=3'>
       <el-button @click='setactivi(1)' type="info">上一步</el-button>
       <el-button @click='setactivi(2)' v-if='active<2' type="primary">下一步</el-button>
       <el-button @click='addserve' v-else type="primary">提交稿件</el-button>
    </div>
  </div>
</template>
<script>
import {selectServices,addOrder,selectSubjectInfos} from '@/api/pc.js'
import { getToken } from "@/utils/auth";
export default {
  name:'orderSubmit',
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
          Authorization: "Bearer " + getToken()
      },
      loading:false,//loading
      list:[],//表格数组
      queryParams:{name:'',},
      // 步骤变量
      active:0,
      serveList:[],
      erservelist:[],//二级服务
      reluform:{
        orderTitle:'', //标题
        subjectId:'', // 二级分类
        codeNum:'', //稿件字数
        remark:'', //摘要
        leaveMessage:'', //留言
        attachmentVO:'', //上传稿件
        finishDayNum:'',//完成时间	
        repeatNum:'',//重复率	
        oneid:'',//一级分类
        towid:'',//二级分类
        attachmentVO:[],
        title:'',
      },
      fileList:[],//稿件上传
      oneArr:[],
      towArr:[],
    };
  },
  mounted(){
    this.getinfo();
    this.getlvarr();
  },
    methods:{
      //设置获取时间
      setfinishTime1(val,list){this.reluform.finishDayNum=list.filter(it=>{return it.value == val;})[0].label;console.log(this.reluform.finishDayNum)},
      //设置查重率
      setrepeatNum1(val,list){this.reluform.repeatNum=list.filter(it=>{return it.value == val;})[0].label;console.log(this.reluform.repeatNum)},
      setfinishTime(val){this.reluform.finishDayNum=val;},
      setrepeatNum(val){this.reluform.repeatNum=val;},
      //获取分类列表
      getlvarr(){
        var formData = new FormData();
        formData.append('subjectType',1)
        selectSubjectInfos(formData).then(res=>{
            this.oneArr = res.rows.map(it=>{return {label:it.subjectName,value:it.subjectId}});
        })
      },
      //获取二级分类
      settowarr(val){
        console.log(val)
        this.towid = "";
        this.towArr = [];
        var formData = new FormData();
        formData.append('subjectType',2)
        formData.append('parentId',val)
        selectSubjectInfos(formData).then(res=>{
            this.towArr = res.rows.map(it=>{return {label:it.subjectName,value:it.subjectId}});
        })
      },
      //设置二级服务的点击选中
      setchecked(val){
        console.log(val)
        if(val.checked){
          val.checked = false;
          return;
        }
        this.erservelist.forEach(it=>{it.checked = false;})
        console.log(val)
        this.reluform.subjectId = val.serviceId;
        val.checked = true;
      },
      setactivi(val){
        console.log(this.active)
        console.log(val)
        
        if(val ==1){
          if(this.active==0){
            return ;
          }
          this.active -=1;
        }else{
          if(this.active==3){
            return ;
          }
          let num = this.active*1 + 1;
          let arr = this.erservelist.filter(it=>{return it.checked})
          if(arr.length==0){
            return this.$message.warning("请选择一项服务")
          }
          let flag = false;
          for(var key in arr[0].serviceInfo){
            console.log(arr[0].serviceInfo[key])
            console.log(arr[0].serviceInfo[key].checkValue)
            if(arr[0].serviceInfo[key].checkValue) flag = true;
          }
          console.log(flag)
          if(!flag){
            return this.$message.warning("请选择服务中最少一项设置")
          }
          
          console.log(this.erservelist.filter(it=>{return it.checked}))
          this.active +=1;
        }
      },
      // 设置选中
      setcheck(val){
        this.serveList.forEach(it=>{
          it.checked = false;
        })
        val.checked = true;
        var formData = new FormData();
        formData.append('parentId',val.serviceId);
        selectServices(formData).then(res=>{
          res.rows.forEach(it=>{
            it.checked = false; 
            it.serviceInfo = JSON.parse(it.serviceInfo);
            console.log(it.serviceInfo)
            it.serviceInfo.finishTime.list = typeof(it.serviceInfo.finishTime.list)=='string'?JSON.parse(it.serviceInfo.finishTime.list):[];
            it.serviceInfo.repeatNum.list = typeof(it.serviceInfo.repeatNum.list)=='string'?JSON.parse(it.serviceInfo.repeatNum.list):[];
          })
          this.erservelist = res.rows;
          this.active +=1;
        })
      },
      getinfo(){
        this.getdata(1).then(res=>{
          res.rows.forEach(it=>{
            it.checked = false;
          })
          this.serveList = res.rows;
        })
      },
      async getdata(val){
        var formData = new FormData();
        formData.append('serviceType',val);
        let res = await selectServices(formData);
        if(res.code==200){
            console.log(res.rows)
            return res;
        }else{
            return [];
        }
      },
      handleQuery(){
          console.log(111)
      },
      handleAdd(){
          console.log(111)
      },
      // 添加
      addserve(){
        let serveid = this.erservelist.filter(it=>{return it.checked})
        serveid.forEach
        if(serveid.length)
        if(!this.reluform.orderTitle){
          return this.$message.warning("请填写标题")
        }
        if(!this.reluform.oneid){
          return this.$message.warning("请选择所属学科")
        }
        // if(!this.reluform.towid){
        //   return this.$message.warning("请选择所属学科")
        // }
        if(!this.reluform.remark){
          return this.$message.warning("请填写摘要")
        }
        if(!this.reluform.leaveMessage){
          return this.$message.warning("请填写留言")
        }
        if(!this.reluform.codeNum){
          return this.$message.warning("请填写稿件字数")
        }
        if(this.fileList.length==0){
          return this.$message.warning("请上传你的稿件")
        }

        let obj = {
          orderTitle:this.reluform.orderTitle,
          subjectId:this.reluform.oneid,
          codeNum:this.reluform.codeNum * 1,
          remark:this.reluform.remark,
          // serviceId:8, //暂时给8过度，需要调整成动态
          // finishDayNum:1,
          serviceId:this.reluform.subjectId, //暂时给8过度，需要调整成动态
          finishDayNum:this.reluform.finishDayNum,
          repeatNum:this.reluform.repeatNum,
          leaveMessage:this.reluform.leaveMessage,
          attachmentVOs:this.reluform.attachmentVO,
        }
        console.log(serveid)
        addOrder(obj).then(res=>{
          console.log(res)
          if(res.code==200){
            this.active +=1;
          }
        })
      },
      // 上传前校检格式和大小
      handleBeforeUpload(file) {
          // 校检文件大小
          if (this.fileSize) {
              const isLt = file.size / 1024 / 1024 < this.fileSize;
              if (!isLt) {
              this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
              return false;
              }
          }
          if(this.fileList.length>=10){
              this.$message({message:'只能上传十个文件',type:'warning'})
              return false;
          }
          return true;
      },
      handleUploadSuccess(res, file) {
          // 如果上传成功
          if (res.code == 200) {
              // 获取光标所在位置
              console.log(res)
              this.fileList.push({fileUrl:res.fileName,fileName:res.realName,attachmentId:'',name:res.realName})
              this.reluform.attachmentVO.push({fileUrl:res.fileName,fileName:res.realName,attachmentId:''})
          } else {
            this.$message.error(res.msg);
          }
      },
      //删除文件
      removeItem(file,fileList,index){
          console.log(file)
          console.log(fileList)
          console.log(index)
          this.fileList = fileList;
          this.reluform.attachmentVO.splice(index,1)
      },
      handleUploadError() {
          this.$message.error("上传失败");
      },
      spkt(){
        this.$router.push({path:'/order'})
      }
    }
};
</script>
<style lang='scss' scoped>
.orderSubmit{
    width: 100%;
    height: calc(100vh - 84px);
    padding:20px;
    position: relative;
    .title_h3{
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .checkserve{
      width: 100%;
      height: 40px;
      font-size: 18px;
      line-height: 40px;
    }
    .serve_ul{
      width: 100%;
      margin: 20px 0;
      height: calc(100% - 180px);
      overflow: auto;
      .serve_li{
        width: 500px;
        // height: 220px;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        .list_item_name{
          padding: 0 20px;
          height: 50px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        .list_item_body{
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          padding: 0 20px 20px;
        }
        .list_item_body-description{
          /* height: 80px; */
          height: auto;
          margin: 10px 0;
          color: #909399;
          line-height: 20px;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
        }
        .list_item_body-form{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
        }
        .list_item_body-form_item{
          margin-right: 10px;
        }
        .list_item_footer{
          height: 50px;
          padding: 0 20px;
          border-top: 1px solid #DCDFE6;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        .list_item_footer-icon{
           margin-left: 16px;
        }
      }
      .tag_item{
          float: left;
          cursor: pointer;
          width: 500px;
          height: 220px;
          border: 1px solid #7fb1dd;
          margin: 10px;
          // padding-top: 40px;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          background-repeat: no-repeat;
          background-position: 100% 100%;
          .tag_item_icon {
              width: 58px;
              height: 54px;
              position: relative;
              text-align: center;
              margin-bottom: 10px;
              margin: 0 auto;
              img {
                  display: inline-block;
                  vertical-align: middle;
                  max-width: 100%;
              }
          }
          .tag_item_name {
              color: #0064b9;
              margin-bottom: 6px;
              font-size: 20px;
              font-weight: 700;
              text-align: center;
          }   
          .tag_item_desc{
            font-size: 14px;
            padding: 0 20px;
            text-align: center;
            color: #c0c4cc;
          }
          &:hover{
            background-color: #0064b9;
            .tag_item_desc,.tag_item_name{
              color: #fff;
            }
          }
      }
      .selected{
        background-color: #0064b9;
        -webkit-box-shadow: 1px 5px 6px rgb(54 133 201 / 50%);
        box-shadow: 1px 5px 6px rgb(54 133 201 / 50%);
        .tag_item_desc,.tag_item_name{
          color: #fff;
        }
      }
    }
    .footer_box{
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: right;
      right: 20px;
      height: 60px;
      padding-top: 12px;
      background-color: #fff;
      z-index: 10;
    }
}
.overservebox{
  width: 100%;
  text-align: center;
  padding-top: 40px;
  .overservebox_title{
    font-size: 24px;
    color: #64c12f;
  }
}
</style>